import React, { useEffect } from 'react';

import { demoUtil } from '../../utils';

import {
  ResourceManager,
  columnFieldsMap,
  ResourceManagerProps,
} from 'easyComponent';

import { commonData } from './commonData';

export default () => {
  const config: ResourceManagerProps = {
    componentsMap: columnFieldsMap,
    rowKey: 'id',
    title: '用户管理',
    fields: [
      {
        label: '姓名',
        name: 'name',
        componentName: 'TextColumnField',
      },
      {
        label: '描述',
        name: 'desc',
        componentName: 'TextColumnField',
        width: '200px',
        ellipsis: true,
      },
      {
        label: '链接',
        name: 'linkName',
        linkKey: 'url',
        componentName: 'LinkColumnField',
      },
      {
        label: '操作',
        name: 'name',
        componentName: 'OperationColumnField',
        actions: [
          {
            label: '编辑',
            handler: () => {
              demoUtil.toastInfo('你点击了编辑');
            },
          },
          {
            label: '删除',
            handler: () => {
              demoUtil.toastInfo('你点击了删除');
            },
            disabled: {
              __binding: true,
              left: '{item}.canDelete',
              op: '===',
              right: 'yes',
            },
          },
        ],
      },
    ],
  };

  useEffect(() => {
    const op = '===';
    const fn = new Function('lVal', 'rVal', 'op', `return lVal ${op} rVal;`);
    const result = fn.call(null, true, true, op);
    // console.log(result, 'result');
  }, []);

  return (
    <div>
      <ResourceManager {...config} dataSource={commonData.simpleDataSource} />
    </div>
  );
};
